<template>
  <div class="box">
    <header>
      <div class="same">
        <div class="header">
          <i @click="goto"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use></svg></i
          ><span>门店详情</span><span>&nbsp;</span>
        </div>
      </div>
    </header>
    <div class="center">
      <div class="same">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img
              src="https://img.zcool.cn/community/0142a858d9fdefa801219c7708b793.jpg@1280w_1l_2o_100sh.jpg"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="https://img.zcool.cn/community/01251258d9fdf4a801219c776ff827.jpg@1280w_1l_2o_100sh.jpg"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftgi1.jia.com%2F124%2F907%2F24907192.jpg&refer=http%3A%2F%2Ftgi1.jia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641698242&t=ef5ef060f80d3bcb619bf2b2d6634d14"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="https://pic.pethr.com/ooooold/ser_u15838_t22_1585133912503923620.jpg?e=1639110065&token=rFtqkgXkbiOxDlUdme-93gGvImAoK04ooLUTm2VY:YaCIfHUJWNzmtr2B6epVpACe34o="
              alt=""
          /></van-swipe-item>
        </van-swipe>
        <p class="title">
          <span class="name">{{ stores.title }}</span
          ><span class="ce" v-show="stores.center">中心医院</span>
        </p>
        <dl>
          <dd v-for="item in stores.lable" :key="item.id">{{ item.name }}</dd>
        </dl>
        <div class="bigtimeAndPark">
          <div class="timeAndPark">
            <span
              ><i class="ico"
                ><svg class="icon" aria-hidden="true">
                  <use
                    xlink:href="#icon-shizhong
"
                    style="font-size: 2vw"
                  ></use></svg></i
              ><span class="time"
                >营业：<span class="timer"
                  >{{ stores.starttime }}-{{ stores.endtime }}</span
                ></span
              > </span
            ><span
              ><i class="ico"
                ><svg class="icon" aria-hidden="true">
                  <use
                    xlink:href="#icon-icon"
                    style="font-size: 2vw"
                  ></use></svg></i
              ><span class="park">{{
                stores.park ? "可停车" : "不可停车"
              }}</span></span
            >
          </div>
        </div>
        <div class="address">
          <p class="addres">
            {{ stores.address }}
          </p>
          <nav>
            <section>
              <i class="ad"
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dizhi"></use></svg></i
              ><span>地址</span>
            </section>
            <section class="r" @click="showPopup">
              <i class="ip"
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua"></use></svg></i
              ><span>电话</span>
            </section>
            <van-popup v-model="show" round
              ><p class="iphone">{{ stores.iphone }}</p>
              <p class="mphone">{{ stores.mphone }}</p></van-popup
            >
          </nav>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        background="#f7f7f7"
        offset-top="7.7vh"
      >
        <!-- <div class="same"> -->
        <van-tab title="团队" class="team">
          <p class="title">
            <i
              ><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tuandui"></use></svg></i
            ><span class="titlename">服务团队</span><span>(6)</span>
          </p>
          <div class="neirong">
            <nav>
              <section
                v-for="item in team"
                :key="item.id"
                @click="teamname = item.name"
              >
                <span :class="teamname == item.name ? 'liang' : ''">{{
                  item.name
                }}</span>
              </section>
            </nav>
            <main v-for="item in team" :key="item.id">
              <div
                v-for="items in item.list"
                v-show="teamname === item.name"
                :key="items.id"
                class="doctorCard"
              >
                <!-- <router-link :to="'/doctordetail/' + items.doctorId"> -->
                <img
                  src="https://img0.baidu.com/it/u=224081144,463462312&fm=26&fmt=auto"
                  alt=""
                />
                <p>{{ items.doctorName }}</p>
                <p>{{ items.doctorRank }}</p>
                <p class="time" v-show="item.name != '美容师'">
                  从业{{ items.doctorTime }}年
                </p>
                <p class="title" v-show="item.name != '美容师'">
                  {{ items.doctorTitle }}
                </p>
                <!-- </router-link> -->
              </div>
            </main>
          </div>
        </van-tab>
        <van-tab title="服务" class="fuwu">
          <p class="title">
            <span>
              <i class="yao"
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-yaopin "></use></svg></i
              ><span class="titlename">医疗服务</span></span
            >
            <span class="right"
              >更多<i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyou1"></use></svg></i
            ></span>
          </p>

          <div class="lists">
            <div
              class="fuwucard"
              v-for="item in medical_list"
              :key="item.medicalId"
            >
              <img
                src="https://p0.meituan.net/dpmerchantpic/13c6f6d5ab5f48194476bd4597e36125_1_b8eb8f1aa8e3ef7a_1_CIiHYsabHBbUjpCXQxPKwb%2FYH6SDjYJDR633FqdCYsh1uSqQsPP%2FisOU4nOc6BOWjTVkbhVCb0h%2BOO5q3PAIWP%2Bb%2BpwkFA37JS7oYrS%2Bub7bszt7kG90eSW1Y0maviYCCbMt2oIaWHLyMX04jW5gsg%3D%3D"
                alt=""
              />
              <p class="titles">{{ item.medicalName }}</p>
              <p class="price">￥{{ item.medicalPrice }}.00</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="美容" class="meirong">
          <p class="title">
            <span>
              <i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-mianfeixishuyongpin"></use></svg></i
              ><span class="titlename">美容洗澡</span></span
            >
            <span class="right"
              >更多<i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyou1"></use></svg></i
            ></span>
          </p>

          <div class="lists">
            <div
              class="meirongcard"
              v-for="item in beautician_list"
              :key="item.medicalId"
            >
              <img
                src="https://p1.meituan.net/dpmerchantpic/0f29ca7adba880ca2470e09e670b5f72_1_b8eb8f1aa8e3ef7a_1_0b%2FhYHI5CYhpDqz78R6aOPhMWZiijaBIH3V1X0df47iVwM3Cky1CS3e2V1Uva4ULdr2u6YxTLFqwt5k%2BLy3NnXMUGPylNVp5NyswMz0XXxsANKyzR8ayzEcy92dqOoBiPfst0e388vNx2MLNAKFOrw%3D%3D"
                alt=""
              />
              <p class="titles">{{ item.medicalName }}</p>
              <p class="price">￥{{ item.medicalPrice }}.00</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="商品" class="shangpin">
          <p class="title">
            <span>
              <i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchengxuanzhong"></use></svg></i
              ><span class="titlename">商品</span></span
            >
            <span class="right"
              >更多<i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyou1"></use></svg></i
            ></span>
          </p>

          <div class="lists">
            <div
              v-show="index < 2"
              class="shangpincard"
              v-for="(item, index) in shangpin_list"
              :key="item.id"
            >
              <img
                src="https://img10.360buyimg.com/n1/jfs/t1/192511/35/13499/487182/60f28900E77a94635/d285bf3d97605859.jpg"
                alt=""
              />
              <p class="titles">{{ item.medicalName }}</p>
              <p class="price">￥{{ item.medicalPrice }}.00</p>
            </div>
            <div class="btn">
              <i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyou1"></use></svg></i
              ><span>更多商品</span>
            </div>
          </div></van-tab
        >
        <van-tab title="简介" class="content">
          <p class="title">
            <span>
              <i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-star2"></use></svg></i
              ><span class="titlename">简介</span></span
            >
          </p>
          <div class="button">
            <p class="titles">介绍</p>
            <p class="con">{{ stores.intro }}</p>
            <p class="titles">专长</p>
            <p class="con">
              <span v-for="(item, index) in stores.merit" :key="item.id"
                ><span v-show="index != 0">、</span>{{ item.name }}</span
              >
            </p>
          </div>
        </van-tab>
        <!-- </div> -->
      </van-tabs>
    </div>
    <div class="bt">
      <nav>
        <section>
          <i
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yaoxiang"></use></svg></i
          ><span>
            <router-link :to="'/Register/' + stores.hospitalId"
              >预约挂号</router-link
            >
          </span>
        </section>
        <section>
          <i
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yaoxiang"></use></svg></i
          ><span><a href="javascript:;">预约洗美</a></span>
        </section>
        <section>
          <i
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenzhen"></use></svg></i
          ><span><a href="javascript:;" style="border: 0">在线问诊</a></span>
        </section>
      </nav>
    </div>
  </div>
</template>

<script>
import {
  selectteam,
  hospitaldetail,
  hospitalyiliao,
  hospitalmeirong,
  hospitalshangpin,
} from "../../api/hospital";
export default {
  data() {
    return {
      show: false,
      active: 0,
      teamname: "医生",
      team: [],
      medical_list: [],
      beautician_list: [],
      shangpin_list: [],
      stores: {},
    };
  },
  created() {
    this.getteam();
    this.gethospitaldetail();
    this.gethospitalyiliao();
    this.gethospitalmeirong();
    this.gethospitalshangpin();
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    getteam() {
      selectteam(this.$route.params.id).then((res) => {
        console.log(res.data.data);
        this.team = res.data.data;
      });
    },
    goto() {
      this.$router.go(-1);
    },
    gethospitaldetail() {
      hospitaldetail(this.$route.params.id).then((res) => {
        this.stores = res.data.data;
        // console.log(res.data.data, "stores");
      });
    },
    gethospitalyiliao() {
      hospitalyiliao(this.$route.params.id).then((res) => {
        this.medical_list = res.data.data;
        // console.log(this.medical_list);
      });
    },
    gethospitalmeirong() {
      hospitalmeirong(this.$route.params.id).then((res) => {
        this.beautician_list = res.data.data;
        // console.log(this.beautician_list);
      });
    },
    gethospitalshangpin() {
      hospitalshangpin(this.$route.params.id).then((res) => {
        this.shangpin_list = res.data.data;
        // console.log(this.shangpin_list);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.van-sticky {
  top: 20vw;
}
.box {
  background: #f7f7f7;
}
.liang {
  border-bottom: 1vw solid rgb(219, 144, 144);
  border-radius: 1vw;
}
header {
  width: 100%;
  position: fixed;
  z-index: 2;
  top: 0;
  background: #fff;
  i {
    transform: rotate(180deg);
  }
}
.header {
  font-size: 4.7vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vh 3vh 2vh 3vh;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 1.5vh;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
  }
}
.center {
  margin-top: 17.5vw;
  background: #fff;
  border-radius: 0 0 2vw 2vw;
  .title {
    display: flex;
    align-items: center;
    padding: 2vw;
    .name {
      font-size: 5vw;
      margin-right: 2vw;
    }
    .ce {
      background: #4ed3b6;
      font-size: 3vw;
      padding: 0.2vw 1.5vw;
      border-radius: 0.5vw;
      color: #fff;
    }
  }
  dl {
    padding: 1vw 1.5vw;
    display: flex;
    font-size: 1vh;
    white-space: nowrap;
    overflow: auto;
    dd {
      padding: 0 1vw;
      margin: 0 0.4vw;
      background: #f1f1f1;
      color: rgb(141, 141, 141);
      transform: scale(0.9);
    }
  }
  .bigtimeAndPark {
    border-bottom: 1px solid #d8d8d8;
    .timeAndPark {
      width: 54vw;
      // background: #0f0;
      display: flex;
      justify-content: space-between;
      padding: 1vw 2vw 5vw 2vw;
      font-size: 2vw;
      color: rgb(161, 161, 161);
      .ico {
        font-size: 4vw;
        padding-right: 1.5vw;
      }
      .time {
        font-size: 3.5vw;
        .timer {
          font-size: 2vw;
        }
      }
      .park {
        padding: 0 1vw;
        font-size: 3.5vw;
      }
    }
  }
  .address {
    padding: 3vw 0;
    display: flex;
    justify-content: space-between;
    .addres {
      font-size: 3.7vw;
      width: 70vw;
    }
    nav {
      font-size: 1vw;
      display: flex;
      align-items: center;
      overflow: hidden;
      section {
        border-right: 1px solid rgb(238, 238, 238);
        padding: 0 3vw;
        display: flex;
        text-align: center;
        flex-direction: column;
        .ad {
          font-size: 3.5vw;
        }
        .ip {
          font-size: 3.5vw;
        }
      }
      .r {
        margin-right: -1vw;
      }
    }
    .iphone {
      border-bottom: 1px solid #ccc;
      padding: 2vw 5vw;
    }
    .mphone {
      padding: 2vw 5vw;
    }
  }
}
.bottom {
  .team {
    background: #fff;
    padding: 0 3vw;
    margin-bottom: 2vw;
    border-radius: 3vw;
    .title {
      padding: 3vw 0;
      border-bottom: 1px solid #ccc;
      font-size: 4.7vw;
      .titlename {
        padding: 0 2vw;
      }
    }
    .neirong {
      nav {
        display: flex;
        section {
          padding: 3vw 7vw 3vw 0;
          span {
            padding: 1vw;
          }
        }
      }
      main {
        overflow: auto;
        white-space: nowrap;
        a {
          color: #333;
        }
        .doctorCard {
          display: inline-block;
          margin-right: 2vw;
          position: relative;
          border-radius: 2vw;
          width: 28vw;
          height: 27vh;
          // padding: 0 0 5vw 0;
          text-align: center;
          font-size: 3.7vw;
          overflow: hidden;
          border: 1px solid #e0e0e0;
          img {
            width: 28vw;
            height: 17vh;
          }
          .title {
            width: 15vw;
            bottom: 19vw;
            left: 50%;
            transform: translateX(-4.2vh);
            position: absolute;
            font-size: 1vw;
            background: #e1e1e1;
            padding: 0.2vw 1vw;
            color: rgb(160, 160, 160);
            border-radius: 0.5vw;
            display: block;
          }
          .time {
            color: #ccc;
          }
        }
      }
    }
  }
  .fuwu {
    background: #fff;
    padding: 0 3vw;
    margin-bottom: 2vw;
    border-radius: 3vw;
    .yao {
      font-size: 6vw;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3vw 0;
      border-bottom: 1px solid #ccc;
      font-size: 4.7vw;
      .titlename {
        padding: 0 1vw;
      }
      .right {
        color: rgb(175, 175, 175);
        font-size: 3.7vw;
      }
    }
    .lists {
      background: #fff;
      padding: 0 3vw;
      margin-bottom: 2vw;
      border-radius: 3vw;
      padding: 3vw 0;
      display: flex;
      overflow: auto;
      .fuwucard {
        img {
          width: 28vw;
          height: 10vh;
        }
        .titles {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 30vw;
          font-size: 3.3vw;
        }
        .price {
          padding-top: 1vw;
          font-size: 3.5vw;
          color: red;
        }
      }
    }
  }
  .meirong {
    background: #fff;
    padding: 0 3vw;
    margin-bottom: 2vw;
    border-radius: 3vw;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 3vw 0;
      border-bottom: 1px solid #ccc;
      font-size: 4.7vw;
      .titlename {
        padding: 0 2vw;
      }
      .right {
        color: rgb(175, 175, 175);
        font-size: 3.7vw;
      }
    }
    .lists {
      padding: 3vw 0;
      display: flex;
      overflow: auto;
      .meirongcard {
        img {
          width: 28vw;
          height: 10vh;
        }
        .titles {
          width: 30vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 3.3vw;
        }
        .price {
          padding-top: 1vw;
          font-size: 3.5vw;
          color: red;
        }
      }
    }
  }
  .shangpin {
    background: #fff;
    padding: 0 3vw;
    margin-bottom: 2vw;
    border-radius: 3vw;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 3vw 0;
      border-bottom: 1px solid #ccc;
      font-size: 4.7vw;
      .titlename {
        padding: 0 2vw;
      }
      .right {
        color: rgb(175, 175, 175);
        font-size: 3.7vw;
      }
    }
    .lists {
      padding: 3vw 0;
      display: flex;
      overflow: auto;
      .shangpincard {
        img {
          width: 28vw;
          height: 14.5vh;
        }
        .titles {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 30vw;
          font-size: 3vw;
        }
        .price {
          padding-top: 1vw;
          font-size: 3.5vw;
          color: red;
        }
      }
    }
    .btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 2vw;
      height: 13vh;
      padding: 2vw;
      background: rgb(236, 236, 236);
      color: rgb(168, 168, 168);
      font-size: 1vw;
      box-sizing: border-box;
      span,
      i {
        font-size: 3vw;
        transform: scale(0.9);
      }
    }
  }
  .content {
    background: #fff;
    padding: 0 3vw 10vh 3vw;
    border-radius: 3vw;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 3vw 0;
      border-bottom: 1px solid #ccc;
      font-size: 4.7vw;
      .titlename {
        padding: 0 2vw;
      }
    }
    .button {
      line-height: 8vw;
      .titles {
        font-size: 4.5vw;
      }
      .con {
        font-size: 3.5vw;
      }
    }
  }
}
.bt {
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
  background: #fff;
  nav {
    display: flex;
    justify-content: space-around;
    section {
      padding: 4vw 0;
      a {
        display: inline;
        font-size: 4vw;
        color: #333;
        padding: 0 3.5vw;
        border-right: 1px solid #ccc;
      }
    }
  }
}
</style>
